<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>Huser List</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">Add Huser</div>
                <div class="layui-card-body ">
                    <form id="add-huser-form" class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">Username</label>
                            <div class="layui-input-block">
                                <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">Password</label>
                            <div class="layui-input-block">
                                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">Name</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">Age</label>
                            <div class="layui-input-block">
                                <input type="number" name="age" placeholder="请输入年龄" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">Gender</label>
                            <div class="layui-input-block">
                                <input type="text" name="gender" placeholder="请输入性别" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">Phone</label>
                            <div class="layui-input-block">
                                <input type="text" name="phone" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">Role</label>
                            <div class="layui-input-block">
                                <input type="text" name="role" placeholder="请输入用户角色" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">BindingID</label>
                            <div class="layui-input-block">
                                <input type="number" name="bindingID" placeholder="请输入绑定ID" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn" lay-submit lay-filter="add">Add</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">Huser List</div>
                <div class="layui-card-body ">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>Role</th>
                            <th>Username</th>
                            <th>User ID</th>
                            <th>Phone</th>
                            <th>Gender</th>
                            <th>Binding ID</th>
                            <th>Age</th>
                            <th>Name</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody id="huser-list">
                        <!-- Huser list will be populated here -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'layer'], function() {
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;

        // 监听表单提交事件
        form.on('submit(add)', function(event){
            console.log("即将阻止表单默认提交行为")
            // 阻止表单默认提交行为
            if (event && typeof event.preventDefault === 'function') {
                event.preventDefault();
            } else {
                console.error('Invalid event object:', event);
            }
            // 获取表单数据
            var formData = {
                username: $('input[name="username"]').val(),
                password: $('input[name="password"]').val(),
                name: $('input[name="name"]').val(),
                age: $('input[name="age"]').val(),
                gender: $('input[name="gender"]').val(),
                phone: $('input[name="phone"]').val(),
                role: $('input[name="role"]').val(),
                bindingID: $('input[name="bindingID"]').val()
            };

            // 发送 Ajax 请求
            $.ajax({
                url: '/api/huser/register',
                type: 'POST',
                data: formData,
                success: function(response) {
                    console.log("添加成功")
                    console.log(response);
                    // 添加成功后的处理，例如刷新用户列表
                    // 这里可以调用刷新用户列表的函数
                    //refreshUserList();

                },
                error: function(error) {
                    console.log(error);
                    // 添加失败后的处理，例如显示错误信息
                }
            });

            return false; // 阻止表单的默认提交行为
        });

        // 删除用户按钮事件
        $('#huser-list').on('click', '.delete-btn', function() {
            var id = $(this).data('id');
            deleteHuser(id);
        });

        // 获取用户列表
        function refreshUserList() {
            $.ajax({
                url: '/api/huser/list',
                type: 'GET',
                success: function(response) {
                    var huserList = $('#huser-list');
                    huserList.empty();

                    $.each(response, function(index, huser) {
                        var row = $('<tr></tr>');
                        row.append('<td>' + huser.role + '</td>');
                        row.append('<td>' + huser.username + '</td>');
                        row.append('<td>' + huser.userID + '</td>');
                        row.append('<td>' + huser.phone + '</td>');
                        row.append('<td>' + huser.gender + '</td>');
                        row.append('<td>' + huser.bindingID + '</td>');
                        row.append('<td>' + huser.age + '</td>');
                        row.append('<td>' + huser.name + '</td>');
                        row.append('<td><button class="layui-btn layui-btn-danger delete-btn" data-id="' + huser.userID + '">Delete</button></td>');
                        huserList.append(row);
                    });
                },
                error: function(error) {
                    console.log(error);
                }
            });
        }

        // 删除用户
        function deleteHuser(id) {
            $.ajax({
                url: '/api/huser/del/' + id,
                type: 'DELETE',
                success: function(response) {
                    console.log(response);
                    // 删除成功后的处理，例如等待0.3秒后刷新页面
                    setTimeout(function() {
                        refreshPage();
                    }, 300); // 300毫秒等于0.3秒
                },
                error: function(error) {
                    console.log(error);
                    // 删除失败后的处理，例如显示错误信息
                }
            });
        }

// 刷新整个页面
        function refreshPage() {
            location.reload(); // 刷新页面
        }
    });
</script>
</body>
</html>
